@charset "utf-8";
*{
    padding:0;
    margin:0;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    font-size:16px;
    color:#000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family:"微软雅黑";
}

/*=======common css finished=======*/

header{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    z-index:999;
    opacity:0.7;
    
    ul{
        height:5rem;
        display:-webkit-flex;
        display:flex;
        flex-direction:row;
        background:#D2D2D2;
        align-items:center;
        
        li{
            list-style:none;
            flex:2;
            
            a{
                text-decoration:none;
                color:#333;
                
                &:hover{
                    color:#007AFF;
                }
            }
            
            &:nth-child(1){
                flex:10;
                display:-webkit-flex;
                display:flex;
                flex-direction:row;
                
                img{
                    margin-left:0.5rem;
                    width:4rem;
                    height:4rem;
                    border-radius:50%;
                }
               
                div{
                    margin-left:0.5rem;
                    
                    p{
                        height:2rem;
                        line-height:2rem;
                        text-align:center;
                        font-size:1rem;
                        font-weight:bold;
                        
                        &:nth-child(1){
                            border-bottom:1px solid #000;
                        }
                    }
                }
            }
        }
    }
}

/* resume wrapper */

#resume_box{
    position:absolute;
    width:100%;
    height:500%;
    
    .box{
        width:100%;
        height:20%;
        overflow:hidden;
        
        .personal-container{
            width:60%;
            height:100%;
            margin:0 auto;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
            
            img,p,div{
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                -ms-transition: all 0.5s;
                -o-transition: all 0.5s;
                transition: all 0.5s;;
            }
            
            .personal-pic{
                position:relative;
                margin-top:15rem;
                
                div{
                    position:relative;
                    width:100%;
                    height:12rem;
                    img{
                        position:absolute;
                        top:1rem;
                        left:42%;
                        width:10rem;
                        height:10rem;
                        border-radius:50%;
                    }
                }
                
                p{
                    position:absolute;
                    top:11rem;
                    width:100%;
                    height:2rem;
                    line-height:2rem;
                    text-align:center;
                    color:#0000FF;
                }
                
                .line{
                    position:absolute;
                    top:13rem;
                    width:100%;
                    height:1px;
                    border-bottom:1px solid #ccc;
                }
            }
            
            .personal-msg{
                margin-top:1rem;
                width:100%;
                height:10rem;
                position:relative;
                p{
                    width:100%;
                    position:absolute;
                    height:2rem;
                    line-height:2rem;
                    text-align:center;
                    color:#333;
                    
                    &:nth-child(1){
                        top:1rem;
                    }
                    
                    &:nth-child(2){
                        top:3rem;
                    }
                    
                    &:nth-child(3){
                        top:5rem;
                    }
                    
                    &:nth-child(4){
                        top:7rem;
                    }
                }
            }
            
            .personal-aboutme{
                position:relative;
                width:100%;
                margin-top:10rem;
                height:3.6rem;
                
                div{
                    -webkit-transition: all 1s;
                    -moz-transition: all 1s;
                    -ms-transition: all 1s;
                    -o-transition: all 1s;
                    transition: all 1s;;
                }
                
                h2,p{
                    margin:0 auto;
                    width:6rem;
                    height:2rem;
                    line-height:2rem;
                    text-align:center;
                }
                
                div{
                    margin:0 auto;
                    width:7rem;
                    height:0.1rem;
                    border-bottom:0.1rem solid #d01744;
                    -webkit-transform: scaleX(0);
                    -moz-transform: scaleX(0);
                    -ms-transform: scaleX(0);
                    -o-transform: scaleX(0);
                    transform: scaleX(0);;
                    
                }
                
                p{
                    width:100%;
                    font-size:1rem;
                    height:1.5rem;
                    line-height:1.5rem;
                    color:#0000FF;
                }
            }
            
            .personal-list{
                padding:1rem 0;
                margin:1rem auto 0;
                width:100%;
                display:-webkit-flex;
                display:flex;
                flex-direction:row;
                background:#ccc;
                
                li{
                    height:100%;
                    flex:1;
                    text-align:center;
                    list-style:none;
                    -webkit-transition: all 1s;
                    -moz-transition: all 1s;
                    -ms-transition: all 1s;
                    -o-transition: all 1s;
                    transition: all 1s;;
                    
                    .icon{
                        margin:0.5rem auto;
                        width:4rem;
                        height:4rem;
                        border-radius:50%;
                        border:0.2rem solid #fff;
                        line-height:4rem;
                        text-align:center;
                        cursor:pointer;
                        -webkit-transition: all 1s;
                        -moz-transition: all 1s;
                        -ms-transition: all 1s;
                        -o-transition: all 1s;
                        transition: all 1s;;
                        
                        
                        i{
                            font-size:150%;
                            text-align:center;
                        }
                        
                        &:hover{
                            color:#D01744;
                            border:0.2rem solid #D01744;
                        }
                    }
                }
            }
            
            .personal-introduce{
                position:relative;
                margin-top:1rem;
                
                p{
                    height:2rem;
                    line-height:2rem;
                    text-align:center;
                    overflow:hidden;
                    white-space: nowrap;
                    text-overflow:ellipsis;
                    text-indent:1rem;
                }
                
                span{
                    position:absolute;
                    display:block;
                    width:2rem;
                    height:2rem;
                }
                
                span.left{
                    left:0;
                    top:0;
                    border-top:2px solid #f00;
                    border-left:2px solid #f00;
                }
                
                span.right{
                    right:0;
                    bottom:0;
                    border-right:2px solid #f00;
                    border-bottom:2px solid #f00;
                }
            }
            
            p.personal-understand{
                margin:1rem 0;
                text-align:center;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
            }
            
            .personal-module{
                position:relative;
                display:-webkit-flex;
                display:flex;
                flex-flow:row nowrap;
                
                li{
                    position:relative;
                    width:25%;
                    flex:1;
                    list-style:none;
                    
                    img{
                        margin:0 auto;
                        display:block;
                        
                        &:nth-child(1){
                            width:40%;
                            cursor:pointer;
                        }
                        
                        &:nth-child(3){
                            width:1.5rem;
                            height:1.5rem;
                        }
                    }
                    
                    p{
                        margin:1rem 0;
                        text-align:center;
                        overflow:hidden;
                        white-space:normal;
                        text-overflow:ellipsis;
                    }
                    
                    .module-introduce{
                        padding:0.5rem;
                        position:absolute;
                        left:0;
                        top:110%;
                        width:100%;
                        background:#333;
                        border-radius:10%;
                        overflow:hidden;
                        display:none;
                        
                        ul{
                            
                            li{
                                width:100%;
                                list-style-type:disc;
                                list-style-position: inside;
                                line-height:1rem;
                                font-size:12px;
                                color:#fff;
                                text-indent:1rem;
                            }
                        }
                    }
                }
            }
            
            .preface{
                margin:1rem 0;
                text-align:center;
            }
            
            .swiper-container{
                width:100%;
                height:20rem;
                
                .swiper-wrapper{
                    height:100%;
                    .swiper-slide{
                        height:100%;
                        background:#ccc url(../images/bga.jpg);
                        opacity:0.5;
                        
                        h2,p,ul{
                            margin-left:5rem;
                        }
                        
                        h2{
                            margin-top:1rem;
                            height:3rem;
                            line-height:3rem;
                            font-size:1.5rem;
                        }
                        
                        p{
                            height:1.8rem;
                            line-height:1.8rem;
                        }
                        
                        ul{
                            li{
                                line-height:2rem;
                            }
                        }
                    }
                }
                
                .swiper-button-prev,.swiper-button-next{
                    width:2rem;
                    height:2rem;
                    opacity:0.7;
                }
            }
            
            .program-pic{
                margin-top:2rem;
                padding-bottom:2rem;
                display:-webkit-flex;
                display:flex;
                flex-direction: row;
                border-bottom:2px solid #d01744;
                -webkit-align-items: center;
                align-items: center;
                
                
                li{
                    position:relative;
                    flex:1;
                    list-style:none;
                    text-align:center;
                    overflow:hidden;
                    
                    a{
                        img{
                            width:12rem;
                            height:6rem;
                            -webkit-box-shadow:10px 10px 10px #000;
                            
                            &:hover{
                                opacity:0.4;
                            }
                        }
                    }
                    
                    p{
                        position:absolute;
                        top:-2rem;
                        left:32%;
                        -webkit-transition: all 0.5s;
                        -moz-transition: all 0.5s;
                        -ms-transition: all 0.5s;
                        -o-transition: all 0.5s;
                        transition: all 0.5s;
                    }
                    
                    &:hover{
                        p{
                            -webkit-transform: translateY(4rem);
                            -moz-transform: translateY(4rem);
                            -ms-transform: translateY(4rem);
                            -o-transform: translateY(4rem);
                            transform: translateY(4rem);;
                        }
                    }
                }
            }
            .more{
                margin:1rem 0;
                text-align: center;
                
                a{
                    color:#f00;
                }
            }
            
            .resume{
                margin-top:3rem;
                p{
                    line-height:2rem;
                    text-align: center;
                }
            }
            
            .contact-me{
                margin:2rem 0;
                
                .contact{
                    margin:0 auto;
                    width:8rem;
                    height:8rem;
                    line-height:8rem;
                    background:#ccc;
                    border-radius:50%;
                    text-align:center;
                    cursor:pointer;
                }
                
                p{
                    text-align: center;
                    line-height:3rem;
                    
                    a{
                        color:#00f;
                    }
                }
            }
        }
        
        
        
        &:hover{
            .personal-container{
                .personal-pic{
                    div{
                        img{
                            -webkit-transform: translateY(-1rem);
                            -moz-transform: translateY(-1rem);
                            -ms-transform: translateY(-1rem);
                            -o-transform: translateY(-1rem);
                            transform: translateY(-1rem);;
                        }
                    }
                    
                    p{
                        -webkit-transform: translateY(-1rem);
                        -moz-transform: translateY(-1rem);
                        -ms-transform: translateY(-1rem);
                        -o-transform: translateY(-1rem);
                        transform: translateY(-1rem);;
                        -webkit-transition-delay: 0.2s;
                        -moz-transition-delay: 0.2s;
                        -ms-transition-delay: 0.2s;
                        -o-transition-delay: 0.2s;
                        transition-delay: 0.2s;;
                    }
                    
                    div.line{
                        -webkit-transform: translateY(-1rem);
                        -moz-transform: translateY(-1rem);
                        -ms-transform: translateY(-1rem);
                        -o-transform: translateY(-1rem);
                        transform: translateY(-1rem);;
                        -webkit-transition-delay: 0.4s;
                        -moz-transition-delay: 0.4s;
                        -ms-transition-delay: 0.4s;
                        -o-transition-delay: 0.4s;
                        transition-delay: 0.4s;;
                    }
                }
                .personal-msg{
                    p{
                        -webkit-transform: translateY(-1rem);
                        -moz-transform: translateY(-1rem);
                        -ms-transform: translateY(-1rem);
                        -o-transform: translateY(-1rem);
                        transform: translateY(-1rem);;
                        
                        &:nth-child(1){
                            -webkit-transition-delay: 0.6s;
                            -moz-transition-delay: 0.6s;
                            -ms-transition-delay: 0.6s;
                            -o-transition-delay: 0.6s;
                            transition-delay: 0.6s;;
                        }
                        
                        &:nth-child(2){
                            -webkit-transition-delay: 0.8s;
                            -moz-transition-delay: 0.8s;
                            -ms-transition-delay: 0.8s;
                            -o-transition-delay: 0.8s;
                            transition-delay: 0.8s;;
                        }
                        
                        &:nth-child(3){
                            -webkit-transition-delay: 1s;
                            -moz-transition-delay: 1s;
                            -ms-transition-delay: 1s;
                            -o-transition-delay: 1s;
                            transition-delay: 1s;;
                        }
                        
                        &:nth-child(4){
                            -webkit-transition-delay: 1.2s;
                            -moz-transition-delay: 1.2s;
                            -ms-transition-delay: 1.2s;
                            -o-transition-delay: 1.2s;
                            transition-delay: 1.2s;;
                        }
                    }
                }
                
                .personal-aboutme{
                    div{
                        -webkit-transform: scaleX(1);
                        -moz-transform: scaleX(1);
                        -ms-transform: scaleX(1);
                        -o-transform: scaleX(1);
                        transform: scaleX(1);;
                    }
                }
                
                .personal-list{
                    li{
                        .icon{
                            -webkit-transform: scale(1.2);
                            -moz-transform: scale(1.2);
                            -ms-transform: scale(1.2);
                            -o-transform: scale(1.2);
                            transform: scale(1.2);;
                        }
                    }
                }
            }
        }
        
        &:nth-child(1){
                background:url(../images/bgc.jpg) center center;
            }
            
        &:nth-child(2){
            background:url(../images/bg17.jpg) center center;
        }
        
        &:nth-child(3){
            background:url(../images/a.jpg) center center;
        }
        
        &:nth-child(4){
            background:url(../images/bgb.jpg) center center;
        }
        
        &:nth-child(5){
            background:url(../images/bgb1.jpg) center center;
        }
        
        &:nth-child(6){
            background:url(../images/bga5.jpg) top center;
        }
    }
}




































/*=======header css finished=======*/

//.swiper-container{
//  height:100%;
//  overflow:hidden;
//  
//  .swiper-wrapper{
//      height:100%;
//      
//      .swiper-slide{
//          height:100%;
//          
//          &:nth-child(1){
//              background:url(../images/bgc.jpg) center center;
//          }
//          
//          &:nth-child(2){
//              background:url(../images/bg17.jpg) center center;
//          }
//          
//          &:nth-child(3){
//              background:url(../images/bgd.jpg) center center;
//          }
//          
//          &:nth-child(4){
//              background:url(../images/bgf.jpg) center center;
//          }
//          
//          &:nth-child(5){
//              background:url(../images/bgg.jpg) center center;
//          }
//          
//          &:nth-child(6){
//              background:url(../images/bg4.jpg) center center;
//          }
//      }
//  }
//}



































